<template>
  <!--  中   -->
  <el-container>
    <el-header style="
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 999;
          padding: 0;
        ">
      <menu-bar></menu-bar>
    </el-header>

    <div style="width: 100% ; margin: 60px auto 0 auto; padding: 0;background-color: #f0f0f0">

      <div style="width: 90% ; margin: 20px auto ;">
        <el-page-header @back="goBack" content="民族详情">

        </el-page-header>
        <div style="width: 100% ; margin: 10px auto ; background-color: #FFFFFF;
                    padding-top: 30px">
          <!--  左      -->
          <!--  右      -->

          <span style="font-family: 华文仿宋;
                       display: block;
                       text-align: center;
                       font-size: 40px;
                       font-weight: bold;
                        ">{{ nation.name }}</span>


          <el-divider></el-divider>

          <el-main>
            <el-row>
              <el-col :span="15">
                <div lang="en" style="width: 90%; margin: 0 auto" class="editor-content-view" id="nationContent">
                </div>
              </el-col>

              <el-col :span="9">
                <el-card style="margin: 0 10px">
                  <div slot="header" class="clearfix">
                    <el-row>

                      <div style="position: relative">
                        <span style="font-size: 16px;line-height: 24px;height: 95px " class="context">{{
                            nation.synopsis
                          }}</span>
                      </div>

                    </el-row>
                  </div>
                  <el-row style="text-align: center">
                    <el-col :span="16">发布于:{{nation.gmtCreate}}</el-col>
                    <el-col :span="8">浏览量:{{nation.viewCount}}</el-col>
                  </el-row>

                </el-card>

                <div style="margin-top: 20px;margin-left: 10px">
                  <span style="margin: 0 20px; line-height: 36px; font-size: 20px">相关推荐</span>
                  <div v-loading="loading" v-for="article in articles" style="margin: 10px ;width: 92% ;">
                    <el-row type="flex" align="middle" :gutter="20" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                      <el-col :span="8">
                        <a :href="'/web/article?id=' +  article.id">
                          <el-image
                              style="width: 100%;margin: auto 0"
                              :src="article.cover"
                              fit="contain"></el-image>
                        </a>
                      </el-col>
                      <el-col :span="16" style="margin-top: 20px">
                        <el-row class="title" style="height: 27px;">
                          <el-link :href="'/article/detail?id=' + article.id + '&nid=' + article.nationId"
                                   style="font-weight:500;font-size: 18px"> {{ article.title }}
                          </el-link>
                        </el-row>
                        <el-row class="contextNation" style="min-height: 50px; margin-top: 8px;font-size: 14px;color:#676767;word-break: break-all;line-height: 28px;">
                          {{ article.synopsis }}
                        </el-row>
                        <el-row style="margin-top: 10px" type="flex" align="middle">
                          <el-col :span="4" style="margin-top: 8px">
                            <el-avatar :size="25" :src="article.avatar"></el-avatar>
                          </el-col>
                          <el-col :span="20" >
                  <span style="font-size: 14px; color: gray">
                        {{ article.nickname }}</span>
                          </el-col>

                        </el-row>

                      </el-col>

                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>

          </el-main>

        </div>
      </div>

    </div>


  </el-container>


</template>


<script>

import MenuBar from "@/components/MenuBar";

export default {
  components: {MenuBar},
  data() {
    return {
      nationId: this.$route.query.id,
      nation: {},
      currentNode: '',
      html: '',
      articles: [],
      loading:false,
    }
  },

  created() {
    this.getArticle();
    console.log("nationId:", this.nationId);
    this.getNation();

  },

  methods: {
    getArticle() {
      this.loading = true;
      this.axios.get("/article/get-by-nation?id="+ this.nationId).then(({data}) => {
        if (data.state == 20000) {
            this.articles = data.data
          this.loading = false;
        } else {
          this.$message.error(data.message);
        }
      });
    },
    getNation() {
      this.axios.get("/nation/get-nation-by-id?id=" + this.nationId).then(({data}) => {
        if (data.state == 20000) {
          this.nation = data.data;
          this.html = data.data.content;
          document.getElementById('nationContent').innerHTML = this.html;

        } else {
          this.$message.error(data.message);
        }
      });
    },
    goBack() {
      window.location.href = "/ethnic/synopsis?nid=" + this.nationId;

      console.log('go back');
    }
  },


}

</script>


<style>

.size-icon {
  font-size: 25px;
}
.contextNation {
  font-size: 13px;
  color: #999;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.el-card__header {
  padding: 18px 20px;
  border-bottom: 1px solid #EBEEF5;
  box-sizing: border-box;
  height: 132px;
}


.el-tree-node__expand-icon {
  cursor: pointer;
  color: #C0C4CC;
  font-size: 12px;
  transform: rotate(0);
  transition: transform .3s ease-in-out;
  /*opacity: 0;*/
}


.el-tree-node__content {
  display: flex;
  align-items: center;
  height: 30px;
  cursor: pointer;
}

.el-tree-node__content:hover {
  background-color: #eff4fa;
  border-radius: 50px;
  height: 30px;
}

.el-tree-node.is-current > .el-tree-node__content {
  background-color: #ffffff !important;
  border-radius: 50px;
  color: #6183f6;
  font-size: 20px;
  height: 30px;
}

.context {
  font-size: 13px;
  color: #999;
  overflow: hidden;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.title{
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.tip {
  font-size: 15px;
  max-width: 200px;
  color: #2f2f2f;
}

.editor-content-view {
  /*border: 1px solid #ccc;*/
  border-radius: 5px;
  padding: 0;
  margin-top: 20px;
  /*overflow-x: auto;*/
}

.editor-content-view p,
.editor-content-view li {
  white-space: pre-wrap; /* 保留空格 */
}

.editor-content-view blockquote {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

.editor-content-view code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
}

.editor-content-view pre > code {
  display: block;
  padding: 10px;
}

.editor-content-view table {
  border-collapse: collapse;
}

.editor-content-view td,
.editor-content-view th {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}

.editor-content-view th {
  background-color: #f1f1f1;
}

.editor-content-view ul,
.editor-content-view ol {
  padding-left: 20px;
}

.editor-content-view img {
  width: 70%;
}

.editor-content-view input[type="checkbox"] {
  margin-right: 5px;
}


</style>

